const container = document.getElementById('container')
const myPlane = document.getElementById('myPlane')
const cr = myPlane.offsetWidth / 2 // 飞机半径
const cw = container.clientWidth || container.offsetWidth // 容器宽度
const ch = container.clientHeight || container.offsetHeight // 容器高度
const cof = container.offsetLeft // 容器左边到页面左边的距离
const cot = container.offsetTop // 容器顶部到页面顶部的距离

// 分数
let scoreNum = 0
const score = document.getElementById('score')

let skinNum = 1
let scenarioNum = 1
let bulletName = `bullent${skinNum}`

let gameT

// 飞机移动
container.addEventListener('mousemove', function(event) {
  const mouseX = event.clientX // 鼠标距离页面左边的距离
  const mouseY = event.clientY // 鼠标距离页面顶部的距离
  // 判断物体在容器内部
  if (mouseX > cof + cr && mouseX < cof + cw - cr && mouseY > cot + cr && mouseY < cot + ch - cr) {
    myPlane.style.left = mouseX - cr + 'px'
    myPlane.style.top = mouseY - cr + 'px'
  }
})

// 发射子弹
myPlane.addEventListener('click', function(event) {
  const mouseX = event.clientX
  const mouseY = event.clientY
  const bullet = document.createElement('div')
  bullet.setAttribute('class', `${bulletName}`)
  bullet.style.position = 'absolute'
  bullet.style.left = mouseX - 15 + 'px'
  bullet.style.top = mouseY - cr - 30 + 'px'
  container.appendChild(bullet)
  const tt = setInterval(() => {
    if (bullet.offsetTop > 0) {
      bullet.style.top = bullet.offsetTop - 1 + 'px'
      const flying = document.getElementsByClassName('flying')
      for (let i = 0; i < flying.length; i++) {
        if (
          bullet.offsetTop < flying[i].offsetTop + flying[i].clientHeight
          && bullet.offsetLeft >= flying[i].offsetLeft - bullet.clientWidth
          && bullet.offsetLeft <= flying[i].offsetLeft + flying[i].clientWidth
        ) {
          getBoom(flying[i].offsetLeft, flying[i].offsetTop)
          clearInterval(tt)
          container.removeChild(bullet)
          container.removeChild(flying[i])
          scoreNum++
        }
      }
    } else {
      clearInterval(tt)
      container.removeChild(bullet)
    }
  }, 10)
})

// 更换皮肤
function changeSkin() {
  if (scoreNum >= 10 && skinNum === 1) {
    skinNum = 2
  } else if (scoreNum >= 20 && skinNum === 2) {
    skinNum = 3
  } else {
    alert('分数不够')
    return
  }
  const planeName = `plane${skinNum}`
  bulletName = `bullent${skinNum}`
  myPlane.setAttribute('class', `plane ${planeName}`)
}

// 更换场景
function changeScenario() {
  if (scoreNum > 10 && scenarioNum === 1) {
    scenarioNum++
  } else if (scenarioNum === 2) {
    scenarioNum = 1
  } else {
    alert('分数不够')
    return
  }
  const bcName = `bc${scenarioNum}`
  container.setAttribute('class', `container ${bcName}`)
}

// 生成爆炸物
function getBoom(boomLeft, boomTop) {
  const boom = document.createElement('div')
  boom.setAttribute('class', 'boom')
  boom.style.position = 'absolute'
  boom.style.left = boomLeft + 'px'
  boom.style.top = boomTop + 'px'
  container.appendChild(boom)
  setTimeout(() => {
    container.removeChild(boom)
  }, 200)
}

// 开始游戏
function startGame() {
  getFlying()
  gameT = setInterval(() => {
    getFlying()
  }, 2000)
}
// 暂停游戏
function stopGame() {
  alert('游戏已暂停,点击确认开始')
  // clearInterval(gameT)
}

// 生成敌机
function getFlying() {
  for (let i = 0; i < 5; i++) {
    const mouseX = parseInt(Math.random() * (cw - 50) + cof)
    const mouseY = cot + parseInt(Math.random() * 100)
    const flying = document.createElement('div')
    flying.setAttribute('class', 'flying')
    flying.style.position = 'absolute'
    flying.style.left = mouseX + 'px'
    flying.style.top = mouseY + 'px'
    container.appendChild(flying)
    const tt = setInterval(() => {
      if (flying.offsetTop > ch - flying.clientHeight - myPlane.offsetWidth) {
        clearInterval(tt)
        container.removeChild(flying)
      } else {
        flying.style.top = flying.offsetTop + 1 + 'px'
      }
    }, 30)
  }
}

// 请求支援
function getAid() {
  if (scoreNum >= 20) {
    const aidPlane = document.createElement('div')
    aidPlane.setAttribute('class', 'aidPlane')
    aidPlane.style.position = 'absolute'
    aidPlane.style.left = cof + 'px'
    aidPlane.style.top = ch / 2 + cot + 'px'
    container.appendChild(aidPlane)
    console.log(aidPlane)
    const tt = setInterval(() => {
      if (aidPlane.offsetLeft < cw + cof - aidPlane.clientWidth) {
        aidPlane.style.left = aidPlane.offsetLeft + 1 + 'px'
        aidPlane.style.top = aidPlane.offsetTop - 1 + 'px'
      } else {
        clearInterval(tt)
        container.removeChild(aidPlane)
      }
    }, 1)
    scoreNum -= 20
    const flying = document.getElementsByClassName('flying')
    for (let i = 0; i < flying.length; i++) {
      getBoom(flying[i].offsetLeft, flying[i].offsetTop)
      container.removeChild(flying[0])
      scoreNum++
    }
  } else {
    alert('分数不够哦')
  }
}

// 计算分数
setInterval(() => {
  score.innerHTML = `${scoreNum}分`
}, 10)
